Repository navigation
perf(build): split the frontend bundle per route and add web vitals attribution - #543
Merged
Merged
Conversation
…ttribution - Drop the app-core manualChunks rule; only vue, vue-router, pinia, vue-i18n and posthog keep named chunks, naive-ui splits by usage (measured faster) - Remove the global VueShowdownPlugin; Help page and drawer set options locally - Reload once onto the target route when a deploy removed a lazy chunk; show an error instead of looping (30 s sessionStorage guard) - PostHog: capture_performance.web_vitals_attribution - lodash -> lodash-es so the shell no longer ships all of lodash - Initial JS on / 764 KB -> 212 KB brotli; mobile FCP on / -54 %, LCP -29 % Spec: specs/2026-10-01-bundle-splitting-vitals-attribution.md Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
✅ Deploy Preview for prunplanner-preview ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 19 |
| Duplication | 0 |
🟢 Coverage 100.00% diff coverage · +0.02% coverage variation
Metric Results Coverage variation ✅ +0.02% coverage variation (-1.00%) Diff coverage ✅ 100.00% diff coverage Coverage variation details
Coverable lines Covered lines Coverage Common ancestor commit (2943c2a) 3544 3455 97.49% Head commit (8014927) 3571 (+27) 3482 (+27) 97.51% (+0.02%) Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch:
<coverage of head commit> - <coverage of common ancestor commit>Diff coverage details
Coverable lines Covered lines Diff coverage Pull request (#543) 27 27 100.00% Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified:
<covered lines added or modified>/<coverable lines added or modified> * 100%
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What and why
Every first visit downloaded the whole app before anything rendered: the
app-coremanualChunks rule pulled all features and heavy libraries (chart.js, vue-flow, dagre, showdown, papaparse, yalps, lightweight-charts) into the initial load. Now the landing page and each route load only what they need, a deploy no longer leaves an open tab on a blank page, and PostHog web vitals name the offending element.Changes
app-corerule; only vue, vue-router, pinia, vue-i18n and posthog keep named chunks. naive-ui splits by usage (one naive-ui chunk was measured and was slower: initial JS 259 → 336 KB brotli, FCP +6–15 %)VueShowdownPlugin; Help page and drawer setflavor="github"and table/emoji options locallysrc/lib/chunkReload.ts: when a deploy removed a lazy chunk, reload once onto the target route; within 30 s of that, show "This page couldn't load…" instead of looping. PostHog chunk failures (content blockers) never reloadcapture_performance: { web_vitals_attribution: true }lodash→lodash-es(5 imports), so the shell no longer ships all of lodashPerformance
Initial JS on
/(entry + modulepreloads): 55 files, 764 KB → 5 files, 212 KB brotli (−72 %).Lighthouse, median of 5 cold runs, main → branch (before the lodash-es change):
/mobile/desktopPlan mobile TBT: TBT only counts after first paint, and FCP moved 3.4 s earlier, so work that ran before the paint now falls inside the window. Total main-thread work on the plan page is lower on the branch (≈1415 ms vs ≈1530 ms, interleaved runs).
How it was verified
QA: PASS after 3 rounds (full, then scoped retests).
pnpm test && pnpm tsc && pnpm lint && pnpm knippass. All checks ran on the production build in the Docker e2e stack:/exchanges/<uuid>,/hq-upgrade-calculatorand/production-chain, identical on main (seed data lacks some exchange data)vendor_posthog+$pageview(none without consent)$web_vitalscarries attribution after consentPATCH /user/preferences/after the lodash-es switchScreenshots: none. No visual change is intended; the QA screenshots only show pages looking the same as before.
After release: compare PostHog p75 web vitals of this version with 0.31.0 once each has ~1,000 LCP samples.
🤖 Generated with Claude Code